<template>
	<header>
		<!-- 标题 -->
		<view class="title">
			<h2>我的</h2>
		</view>

		<!-- header -->
		<view class="head">
			<view class="">
				<span>兴欣</span>
			</view>
			<view class="">
				<ul class="flex">
					<li>
						<span>1</span>
						<br>
						我的关注
					</li>
					<li>
						<span>0</span>
						<br>
						我的粉丝
					</li>
					<li>
						<span>1</span>
						<br>
						我喜欢的
					</li>
					<li>
						<span>3</span>
						<br>
						历史浏览
					</li>
				</ul>
			</view>
		</view>

		<!-- body -->
		<view class="box">
			<view @click="ChangePage(url)">
				<uni-icons type="gift" size="20"></uni-icons>
				我的礼物
			</view>
			<view @click="ChangePage(url)">
				<uni-icons type="gift" size="20"></uni-icons>
				赠予管理
			</view>
			<view @click="ChangePage(url)">
				<uni-icons type="medal" size="20"></uni-icons>
				我的藏品
			</view>
			<view @click="ChangePage(url)">
				<uni-icons type="wallet" size="20"></uni-icons>
				钱包管理
			</view>
			<view @click="ChangePage(url)">
				<uni-icons type="gear" size="20"></uni-icons>
				个人设置
			</view>
			<view @click="ChangePage(url)">
				<uni-icons type="pyq" size="20"></uni-icons>
				我要创作
			</view>
		</view>

		<!-- footer -->
		<view class="myshop">
			<h3>我的交易</h3>
			<view class="min">
				<view>
					<uni-icons type="shop" size="20"></uni-icons>
					我买到的
				</view>
				<view>
					<uni-icons type="paperplane" size="20"></uni-icons>
					我发布的
				</view>
				<view>
					<uni-icons type="cart" size="20"></uni-icons>
					我卖出的
				</view>
			</view>
		</view>

		<!-- 导航栏 -->
		<view class="navigation flex">
			<view>
				<uni-icons type="home" size="20"></uni-icons>
				首页
			</view>
			<view>
				<uni-icons type="cart" size="20"></uni-icons>
				市场
			</view>
			<view>
				<uni-icons type="color" size="20"></uni-icons>
				艺术家
			</view>
			<view>
				<uni-icons type="person" size="20"></uni-icons>
				我的
			</view>
		</view>
	</header>


</template>

<script>
	export default {
	
		
		
		
		methods: {
			ChangePage(url) {
				this.$router.push(url)
			},
		},
}
</script>

<style lang="scss">
	view {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		height: 100rpx;
		width: 750rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.head {
		height: 200rpx;
		width: 750rpx;
		// background-color: pink;
	}

	.flex {
		display: flex;
		list-style: none;
	}

	.box {
		width: 750rpx;
		height: 400rpx;
		// background-color: aqua;
	}

	.box view {
		display: inline-block;
		height: 180rpx;
		width: 187rpx;
		line-height: 180rpx;
		text-align: center;
	}

	li {
		width: 187rpx;
		text-align: center;

	}

	.myshop {
		height: 200rpx;
		width: 750rpx;
		// background-color: #8f8f94;
	}

	.min view {
		display: inline-block;
		width: 187rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.navigation {
		height: 100rpx;
		width: 750rpx;
		// background-color: yellow;
		position: absolute;
		top: 100%;
		left: 0%;
	}

	header {
		position: absolute;
	}

	.navigation view {
		height: 100rpx;
		width: 200rpx;
		line-height: 100rpx;
		text-align: center;
	}
</style>
